<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>批量重发</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #e0f2f1;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            max-width: 700px;
            width: 90%;
            margin: 20px;
            padding: 30px;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            text-align: center;
            color: #00796b;
            margin-bottom: 25px;
            font-size: 24px;
            visibility: hidden;
        }

        .form {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .form-group {
            flex: 1;
            min-width: 150px;
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            margin-bottom: 8px;
            font-weight: 600;
            color: #004d40;
            font-size: 16px;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            padding: 12px;
            border-radius: 6px;
            border: 2px solid #b2dfdb;
            box-sizing: border-box;
            font-size: 16px;
            color: #004d40;
            background-color: #f1f8e9;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: #00796b;
            outline: none;
            box-shadow: 0 0 10px rgba(0, 121, 107, 0.5);
            background-color: #ffffff;
        }

        .form-group input,
        .form-group select {
            height: 50px;
            /* Consistent height */
        }

        .form-group textarea {
            height: 120px;
            /* Larger textarea for order numbers */
            resize: vertical;
        }

        .button-container {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .button-container button {
            width: 200px;
            padding: 10px 20px;
            border: none;
            background-color: #FF5000;
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
        }

        .button-container button:hover {
            background-color: rgba(255, 80, 0, 0.2);
            transform: translateY(-2px);
        }

        .response {
            margin-top: 20px;
            padding: 15px;
            border-radius: 6px;
            background-color: #e0f2f1;
            border: 1px solid #00796b;
            color: #004d40;
            display: none;
            font-size: 16px;
            white-space: pre-wrap;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>批量重发</h1>
        <div class="form">
            <div class="form-row">
                <div class="form-group">
                    <label for="txnDate">日期：</label>
                    <input type="text" id="txnDate" name="txnDate">
                </div>
            </div>
            <div class="form-group">
                <label for="orderNumbers">订单号：</label>
                <textarea id="orderNumbers" name="orderNumbers" placeholder="输入订单号，以逗号隔开获取"></textarea>
            </div>
        </div>
        <div class="button-container">
            <button onclick="batchSettlement()">批量重发</button>
        </div>
        <div id="response" class="response">
            <!-- 响应报文将在这里显示 -->
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            flatpickr("#txnDate", {
                dateFormat: "Y-m",  // 设置日期格式为 年-月
                defaultDate: new Date(),
                plugins: [
                    new monthSelectPlugin({
                        shorthand: true, // 使用简写形式（例如 'Jan', 'Feb'）
                        dateFormat: "Y-m",
                        defaultDate: new Date(), // 默认日期
                        altInput: true,
                        altFormat: "Y年m月", // 友好显示格式
                        theme: "dark" // 可选，设置主题
                    })
                ],
                locale: "zh"  // 使用中文语言
            });
        });

        async function batchSettlement() {
            const orderNumbers = document.getElementById('orderNumbers').value.split(/[\n,，]/).filter(order => order.trim() !== '').join(',');
            const txnDateInput = document.getElementById('txnDate').value;

            // 格式化日期为 "YYYYMM"
            const [year, month] = txnDateInput.split('-');
            const txnDate = `${year}${month.padStart(2, '0')}`; // 确保月份是两位数

            // 检查必填字段
            if (!orderNumbers || !txnDate) {
                alert('订单号和日期不能为空');
                return;
            }

            // 显示加载状态
            const responseDiv = document.getElementById('response');
            responseDiv.style.display = 'none'; // 隐藏响应区域

            try {
                const response = await fetch('https://dytest.zhaoshujie.top/console/batchReorder', {
                    method: 'POST',
                    body: new URLSearchParams({
                        'month': txnDate,
                        'chargeNoList': orderNumbers
                    }),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                });

                const data = await response.json();

                if (data.Code === '0000') {
                    responseDiv.innerText = `请求成功\n返回消息: ${data.Msg}`;
                } else {
                    responseDiv.innerText = `请求失败\n返回消息: ${data.MSg}`;
                }

                responseDiv.style.display = 'block'; // 显示响应区域
            } catch (error) {
                console.error('网络错误:', error);
                responseDiv.innerText = '网络问题，请检查网络连接';
                responseDiv.style.display = 'block'; // 显示响应区域
            }
        }
    </script>
</body>

</html>